<template>
  <div class="detail-table">
    <el-table
      v-loading="loading"
      :data="tableData"
      height="250"
      max-height="500px"
      stripe
      style="width: 100%"
    >
      <!--      焦虑记录-->
      <el-table-column
        v-if="type === 0"
        label="计划发生时间"
        prop="eightAnser"
        width="160"
      />
      <el-table-column
        v-if="type === 0"
        label="焦虑内容"
        prop="anxietyLogName"
        width="150"
      />
      <!--      <el-table-column v-if="type===0" label="焦虑内容">-->

      <!--        <template slot-scope="scope">-->
      <!--          &lt;!&ndash;          <el-link type="primary"> 1条</el-link>&ndash;&gt;-->
      <!--          <span>1条</span>-->
      <!--        </template>-->
      <!--      </el-table-column>-->
      <el-table-column v-if="type === 0" label="预估成本" prop="nineAnser" />
      <el-table-column v-if="type === 0" label="是否发生" prop="tenAnser">
        <template slot-scope="scope">
          <span v-if="scope.row.happened === 0">否</span>
          <span
            v-if="scope.row.happened && scope.row.happened === 100"
          >是</span>
        </template>
      </el-table-column>
      <el-table-column
        v-if="type === 0"
        label="实际成本"
        prop="realEncounters"
        width="150"
      />
      <el-table-column v-if="type === 0" label="预估>实际?">
        <template slot-scope="scope">
          <span v-if="scope.row.happened === 0">/</span>
          <span v-else-if="!scope.row.realEncounters" />
          <span v-else>
            {{ scope.row.isPredicateOver ? "是" : "否" }}
          </span>
        </template>
      </el-table-column>
      <el-table-column
        v-if="type === 0"
        label="记录时间"
        prop="createTime"
        width="160"
      />
      <el-table-column
        v-if="type === 0"
        label="现实校验时间"
        prop="realityCheckTime"
      />

      <!--      放松记录-->
      <el-table-column v-if="type === 1" label="放松项目" prop="detailInfo" />
      <el-table-column
        v-if="type === 1"
        label="放松日期"
        prop="createTimeStr"
      />
      <el-table-column
        v-if="type === 1"
        label="起止时间"
        prop="startEndPeriodStr"
      />
      <el-table-column v-if="type === 1" label="时长" prop="duration">
        <!--        <template>-->
        <!--          <span>20 mins</span>-->
        <!--        </template>-->
      </el-table-column>
      <el-table-column v-if="type === 1" label="放松前焦虑值" prop="score" />
      <el-table-column v-if="type === 1" label="放松后焦虑值" prop="scoreTotal">
        <template slot-scope="scope">
          <div>
            <span>{{ scope.row.scoreTotal }}</span>
            <i
              v-if="scope.row.scoreTotal !== 0"
              :class="`el-icon-${scope.row.indicatorState}`"
              :style="{
                color: scope.row.indicatorColor,
                fontSize: '16px',
                marginRight: '5px',
              }"
            />
          </div>
        </template>
      </el-table-column>
      <!--      <el-table-column v-if="type===1" label="记录时间" prop="createTime" width="200" />-->

      <!--      心情记录-->
      <el-table-column
        v-if="type === 2"
        label="记录时间"
        prop="createTime"
        width="170"
      />
      <el-table-column v-if="type === 2" label="心情词" prop="moodStr" />
      <el-table-column
        v-if="type === 2"
        label="当前做的事情"
        prop="questionCode"
      />
      <el-table-column v-if="type === 2" label="当时和谁一起" prop="whoStr" />
      <el-table-column v-if="type === 2" label="当时在哪" prop="whereSrr" />
      <el-table-column v-if="type === 2" label="愉悦感" prop="fulfillmentScore">
        <template slot-scope="scope">
          <span>{{ scope.row.fulfillmentScore }}星</span>
        </template>
      </el-table-column>
      <el-table-column v-if="type === 2" label="成就感" prop="enjoymentScore">
        <template slot-scope="scope">
          <span>{{ scope.row.enjoymentScore }}星</span>
        </template>
      </el-table-column>
      <el-table-column
        v-if="type === 2"
        label="美好记录"
        prop="optionInfo"
        width="220"
      />
      <el-table-column v-if="type === 2" label="图片">
        <template slot-scope="scope">
          <div
            v-if="
              !scope.row.questionInfo.imgUrl ||
                scope.row.questionInfo.imgUrl.length <= 0
            "
          >
            <i class="el-icon-picture-outline" />
            <span>x0</span>
          </div>
          <div
            v-if="
              scope.row.questionInfo.imgUrl &&
                scope.row.questionInfo.imgUrl.length > 0
            "
          >
            <a
              :href="scope.row.questionInfo.imgUrl"
              target="_blank"
              class="mood-record-image-link"
            >
              <i class="el-icon-picture-outline" />
              <span>x1</span>
            </a>
          </div>
        </template>
      </el-table-column>

      <!--      测评记录-->

      <el-table-column
        v-if="type === 3"
        label="测评内容"
        prop="behaveTypeStr"
      />
      <el-table-column v-if="type === 3" label="测评结果" prop="results">
        <!--        <template slot-scope="scope">-->
        <!--          <span>第{{ scope.row.status }}次</span>-->
        <!--        </template>-->
      </el-table-column>
      <el-table-column v-if="type === 3" label="测评时间" prop="createTime" />
      <el-table-column v-if="type === 3" label="测评得分" prop="score" />

      <!--      跟进记录-->

      <el-table-column v-if="type === 4" label="记录时间" prop="createTime" />
      <el-table-column v-if="type === 4" label="记录人" prop="operateBy" />
      <el-table-column
        v-if="type === 4"
        label="自杀风险等级"
        prop="riskLevel"
      />
      <el-table-column
        v-if="type === 4"
        label="风险备注"
        prop="riskLevelDesc"
        width="400"
      />
      <el-table-column v-if="type === 4" label="上周作业情况" prop="weekWork" />
      <el-table-column v-if="type === 4" label="作业备注" prop="weekWorkDesc" />
      <el-table-column
        v-if="type === 4"
        label="来访者反馈"
        prop="visitorsFeedback"
      />
    </el-table>

    <!--                      @size-change="handleSizeChange"
  @current-change="handleCurrentChange"

              :current-page="currentPage"
                          :total="tableData.length"

-->

    <el-row justify="end" style="margin-top: 10px" type="flex">
      <!--      <el-pagination-->
      <!--        :page-size="20"-->
      <!--        :page-sizes="[20,50,100]"-->
      <!--        layout="total, sizes, prev, pager, next, jumper"-->
      <!--      />-->
      <pagination
        v-show="total > 0"
        :background="false"
        :limit.sync="pageSize"
        :page.sync="currentPage"
        :total="total"
        @pagination="loadData"
      />
    </el-row>
  </div>
</template>

<script>
import {
  GetAnxietyLogList,
  GetFollowList,
  GetMoodRecordList,
  GetPraticeList,
  GetPriceList,
  GetRelaxationList
} from '@/api/api'

import Pagination from '@/components/Pagination'
import { getBehaveDisplayByType } from '@/utils/common'

export default {
  name: 'PatientDetailTable',
  components: {
    Pagination
  },
  props: {
    type: {
      type: Number,
      default: 0 // 0 : anxiety 1:relax 2:mood 3:price 4:follow
    },
    evaluationType: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      userId: 0,
      tableData: [],
      loading: false,
      currentPage: 1,
      pageSize: 10,
      total: 0
    }
  },
  watch: {
    evaluationType(newValue, oldValue) {
      if (!newValue && !oldValue) {
        return
      }
      this.loadData()
    }
  },
  mounted() {
    const route = this.$route
    this.userId = Number.parseInt(route.query.id, 10)

    this.loadData()
  },
  methods: {
    loadData() {
      switch (this.type) {
        case 0:
          this.getAnxietyLogList()
          break
        case 1:
          this.getRelaxList()
          break
        case 2:
          this.getMoodRecordList()
          break
        case 3:
          this.getPriceList()
          break
        case 4:
          this.getFollowList()
          break
      }
    },
    async getAnxietyLogList() {
      try {
        if (this.loading) {
          return
        }
        this.loading = true
        const res = await GetAnxietyLogList({
          userId: this.userId,
          pageNum: this.currentPage,
          pageSize: this.pageSize
        })
        console.log('res.data', res.data)
        this.loading = false
        this.total = res.data.total
        this.tableData = res.data.rows.map((item) => {
          item.isPredicateOver =
            Number.parseInt(item.nineAnser, 10) >
            Number.parseInt(item.realEncounters, 10)
          item.questionInfo
            ? (item.questionInfo = JSON.parse(item.questionInfo))
            : undefined
          // item.assessInfo
          //   ? (item.assessInfo = JSON.parse(item.assessInfo))
          //   : undefined;
          return item
        })
      } catch (e) {
        this.loading = false
        console.error(e)
      }
    },
    async getRelaxList() {
      try {
        if (this.loading) {
          return
        }
        this.loading = true
        const res = await GetRelaxationList({
          userId: this.userId,
          pageNum: this.currentPage,
          pageSize: this.pageSize
        })

        /***/
        this.loading = false
        this.total = res.data.total
        this.tableData = res.data.rows.map((item) => {
          const seconds = item.remark ? Number.parseInt(item.remark, 10) : 0
          const minutes = Math.ceil(seconds / 60)
          const createtime = this.$dayjs(item.createTime)
          // const periodEndTime = createtime.add(20, 'minute')
          const periodEndTime = createtime.add(minutes, 'minute')
          item.createTimeStr = createtime.format('YYYY-MM-DD (ddd)')
          // item.startEndPeriodStr = `${createtime.format('HH:mm:ss')} - ${periodEndTime.format('HH:mm:ss')}`
          item.startEndPeriodStr = `${createtime.format(
            'HH:mm'
          )} - ${periodEndTime.format('HH:mm')}`
          item.duration = `${Math.ceil(seconds / 60)}分钟`

          const score = Number.parseInt(item.score, 10)
          const scoreTotal = Number.parseInt(item.scoreTotal, 10)
          item.indicatorState =
            score > scoreTotal
              ? 'bottom'
              : score === scoreTotal
                ? 'right'
                : 'top'
          item.indicatorColor =
            score > scoreTotal ? 'green' : score === scoreTotal ? '' : 'red'

          return item
        })
      } catch (e) {
        this.loading = false
        console.error(e)
      }
    },
    async getPriceList() {
      try {
        if (this.loading) {
          return
        }
        this.loading = true
        const res = await GetPriceList({
          userId: this.userId,
          pageNum: this.currentPage,
          pageSize: this.pageSize,
          behaveType: this.evaluationType
        })
        this.loading = false
        if (res.data.code === 200) {
          this.total = res.data.total
          this.tableData = res.data.rows.map((item) => {
            item.behaveTypeStr = getBehaveDisplayByType(
              Number.parseInt(item.behaveType, 10)
            )
            return item
          })
        }
      } catch (e) {
        this.loading = false
        console.error(e)
      }
    },
    async getMoodRecordList() {
      try {
        if (this.loading) {
          return
        }
        this.loading = true
        const res = await GetMoodRecordList({
          userId: this.userId,
          pageNum: this.currentPage,
          pageSize: this.pageSize
        })
        this.loading = false
        this.total = res.data.total
        this.tableData = res.data.rows.map((item) => {
          item.questionInfo
            ? (item.questionInfo = JSON.parse(item.questionInfo))
            : undefined
          return item
        })
      } catch (e) {
        this.loading = false
        console.error(e)
      }
    },
    async getPraticeList() {
      try {
        if (this.loading) {
          return
        }
        this.loading = true
        const res = await GetPraticeList({
          userId: this.userId,
          pageNum: this.currentPage,
          pageSize: this.pageSize
        })
        this.loading = false
        this.total = res.data.total
        this.tableData = res.data.rows
      } catch (e) {
        this.loading = false
        console.error(e)
      }
    },
    async getFollowList() {
      try {
        if (this.loading) {
          return
        }
        this.loading = true
        const res = await GetFollowList({
          userId: this.userId,
          pageNum: this.currentPage,
          pageSize: this.pageSize
        })
        this.loading = false
        this.total = res.data.total
        this.tableData = res.data.rows
      } catch (e) {
        this.loading = false
        console.error(e)
      }
    }
  }
}
</script>

<style scoped lang="scss">
.mood-record-image-link {
  transition: all 0.2s ease;
  &:hover {
    opacity: 0.6;
  }
}
</style>
